<template>
<transition name="fade-in">
  <div class="slideModal" v-show="visible">
    <transition name="slide-from-right">
      <div class="slideModal__content" v-show="visible">
        <div @click="close">关闭</div>
        <slot></slot>
      </div>
    </transition>
    <div class="slideModal__mask" @click="close"></div>
  </div>
</transition>
</template>

<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      close () {
        this.$emit('update:visible', false)
      }
    }
  }
</script>

<style>
  .slideModal{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
  }
  .slideModal__mask{
    width: 50%;
    height: 100%;
    float: left;
    background:#e1e1e1;
    opacity: 0.5;
  }
  .slideModal__content{
    width: 50%;
    height: 100%;
    float: right;
    background: white;
  }

  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to{
    transform: translateX(10px);
    opacity: 0;
  }
</style>
